<template>
  <div class="hello">
    <h1>适当方式对官方的</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
$font-size-base:75;  //标注稿基准字体大小
$font-color-base:#333;  //基础字体颜色
// $bgColor:#f4f4f4;  //背景色
/*-------------font-size start-------------*/
@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

html,body,a{
  font-family: 'microsoft yahei','Helvetica','Verdana',sans-serif;
  @include font-dpr(12px);
  color: $font-color-base;
}
/*-------------font-size end-------------*/
h1 {
  font-size: 22rem/$font-size-base;
}
// 公共
.m-ppp-btn-sm {
  width: 110rem/$font-size-base;
  height: 40rem/$font-size-base;
  line-height: 40rem/$font-size-base;
  text-align: center;
  border: solid 1px #fa471e;
  font-size: 22rem/$font-size-base;
  letter-spacing: 4px;
  color: #fa471e;
}

footer {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  div {
    flex-grow: 1;
    width:100%;
    height: 100rem/$font-size-base;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff7f34;
    img {
        margin-right: 32rem/$font-size-base;
        width: 52rem/$font-size-base;
        height: 46rem/$font-size-base
    }
    img:nth-child(2) {
        width: 50rem/$font-size-base;
        height: 52rem/$font-size-base
    }
    a {
      font-size: 30rem/$font-size-base!important;
      color: #ffffff;
    }
  }
  div:nth-child(2) {
    background-color: #fa471e
  }
}
// ==========
.m-item-t {
  padding: 44rem/$font-size-base 30rem/$font-size-base;
  font-size: 32rem/$font-size-base;
  color: $font-color-base;
  display: flex;
  justify-content:space-between;
  align-items:center;
  h1 {
    font-size: 32rem/$font-size-base;
    color: $font-color-base;
  }
  a {
    font-size: 24rem/$font-size-base;
    color: #fa471e;
  }
}

.m-p-items2 {
  width: 690rem/$font-size-base;
  margin: 0 auto;
  display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
  >div {
    width: 330rem/$font-size-base;
    margin-bottom: 35rem/$font-size-base;
    img {
      width: 100%;
      height: 300rem/$font-size-base;
    }
    >div {
      height: 120rem/$font-size-base;
      display: flex;
      flex-direction: column; 
      justify-content: center;
      margin-left: 30rem/$font-size-base;
      // align-items: center;
      h1 {
        font-size: 26rem/$font-size-base;
        color: $font-color-base;
      }
      div {
        display: flex;
        align-items:flex-end;
        span {
          margin-right: 20rem/$font-size-base
        }
      }
      >span {
        font-size: 22rem/$font-size-base;
        color: #636363;
        margin-top: 20rem/$font-size-base
      }
    }
  }
}
body{
  // background-color: $bgColor;
  padding-bottom: 234rem/$font-size-base
}
.mt-hr {
  width: 750rem/$font-size-base;;
  height: 12rem/$font-size-base;;
  background-color: #eee;
}
.w690{
  width: 690rem/$font-size-base;
  margin: 0 auto;
  padding: 17rem/$font-size-base 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  >img {
    width: 174rem/$font-size-base;
    height: 56rem/$font-size-base;
  }
  div {
    img {
      width: 44rem/$font-size-base;
      height: 40rem/$font-size-base;
    }
    ul {
      display: none
    }
  }
}

.brief {
  width: 690rem/$font-size-base;;
  height: 180rem/$font-size-base;
  background-color: #ffffff;
  box-shadow: 0px 0px 13px 2px rgba(191, 191, 191, 0.18);
  margin: 29rem/$font-size-base auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  >div {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    width: 100%;
    border-left: 1px solid #d2d2d2;
    div {
      height: 110rem/$font-size-base;
      display: flex;
      align-items: center;
      img {
        width: 68rem/$font-size-base;
        height: 62rem/$font-size-base;
      }
    }
    span {
      // margin-top: 32rem/$font-size-base;
      font-size: 26rem/$font-size-base;
      color: #636363
    }
  }
  div:nth-child(1) {
    border-left: 0
  }
}
.sec1 {
  .sw-out {
    width: 690rem/$font-size-base;
    margin: 0 auto
  }
  .swiper-slide {
    overflow: hidden;
    img {
      // width: 570rem/$font-size-base;
      height: 300rem/$font-size-base;
    }
  }
  .jj-str {
    margin: 76rem/$font-size-base auto;
    width: 501rem/$font-size-base;
    height: 164rem/$font-size-base;
    display:flex;
    justify-content: space-between;
    align-items: center;
    >div {
      height: 164rem/$font-size-base;
      display:flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      div {
        height: 110rem/$font-size-base;
        display:flex;
        align-items: center;
      }
      img {
        width: 108rem/$font-size-base;
        height: 110rem/$font-size-base;
        font-size:26rem/$font-size-base;
        color: $font-color-base
      }
    }
    div:nth-child(2) {
      img{
        width: 110rem/$font-size-base;
        height: 104rem/$font-size-base;
      }
    }
    div:nth-child(3) {
      img{
        width: 118rem/$font-size-base;
        height: 60rem/$font-size-base;
      }
    }
  }
  .sec-1-btn {
    width: 390rem/$font-size-base;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    a {
      width: 160rem/$font-size-base;
      height: 40rem/$font-size-base;
      line-height: 40rem/$font-size-base;
      font-size: 22rem/$font-size-base;
      color: #7d7d7d;
      border: 1px solid #7d7d7d;
    }
    a:nth-child(2) {
      color: #fa471e;
      border: 1px solid #fa471e
    }
  }
}

.lanmu {
  width: 100%;
  height: 110rem/$font-size-base;
  background: url('../../img/home/t-bg.png') no-repeat center;
  background-size: cover;
  display: flex;
  align-items: center;
  margin: 76rem/$font-size-base auto;
  div {
    margin-left: 50rem/$font-size-base;
    display: flex;
    align-items: center;
    img {
      width: 40rem/$font-size-base;
      height: 36rem/$font-size-base;
      margin-right: 32rem/$font-size-base;
    }
    div {
      display: flex;
      flex-direction: column;
      align-items:flex-start;
      margin-left: 0;
      h1 {
        color: $font-size-base;
        font-size: 26rem/$font-size-base;
        margin-bottom: 20rem/$font-size-base
      }
      span {
        color: #636363;
        font-size: 22rem/$font-size-base;
      }
    }
  }
}

.sec3 {
  width: 690rem/$font-size-base;
  margin: 0 auto;
  .sec3-t {
    display: flex;
    p {
      width: 345rem/$font-size-base;
      height: 50rem/$font-size-base;
      line-height: 50rem/$font-size-base;
      text-align: center; 
      background-color: #fa471e;
      border-radius: 25rem/$font-size-base;
      font-size: 26rem/$font-size-base;
      color: #fff;
    }
  }
  form {
    margin-top: 60rem/$font-size-base;
    div {
      height: 60rem/$font-size-base;
      display: flex;
      align-items:center;
      justify-content: space-between;
      margin-bottom: 15rem/$font-size-base;
      span {
        color: $font-size-base;
        font-size: 26rem/$font-size-base;
      }
      input {
        width: 540rem/$font-size-base;
        height: 60rem/$font-size-base;
        border: solid 1px #d2d2d2;
        color: #d2d2d2;
        font-size: 26rem/$font-size-base;
        text-indent: 30rem/$font-size-base
      }
    }
    button {
      display: block;
      width: 290rem/$font-size-base;
      height: 60rem/$font-size-base;
      background-color: #fa471e;
      float: right;
      color: #fff;
      font-size: 26rem/$font-size-base
    }
  }
}
</style>
